<template>
    <div id="login">
      <div id="login-box">
        <span class="login-tittle" style="font-size:40px; margin-bottom: 10px;">经济学行为决策实验平台</span>
        <span class="login-tittle" style="font-size:15px; margin-bottom: 30px;">Behavior decision-making experimental platform</span>
        <el-form label-position="left" :model="testee">
          <el-form-item >
            <el-input v-model="testee.id" placeholder="请输入受试者学号"></el-input>
          </el-form-item>
          <el-form-item >
            <el-input v-model="testee.seat_number" placeholder="请输入受试者座位号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="margin-top: 10px;" @click="login" >开始实验</el-button>
          </el-form-item>
        </el-form>
        <el-container>
          <el-main>
            <img src="http://www.lincat.cloud/asset/school-badge.png" style='width: 200px; '/>
            <div id="bottom-font">参赛队伍：人月神话 指导老师：孔俊 队伍成员：李一帆 董小萌 侯文科 赵坤</div>
          </el-main>
        </el-container>
        </div>      
    </div>
  </template>
  
<script>
  export default {
    name: 'login',
    data () {
      return {
        testee: {
          'id':'2022103263',
          'seat_number':'A1'
        }
      }
    },
    methods:{
      login(){
        window.sessionStorage.setItem('testee_id',this.testee.id)
        window.sessionStorage.setItem('seat_sno',this.testee.seat_number)
        this.$router.push({
          path:'/loading'
        })
      }
    }
  }
</script>
  
<style>
#login{
  background-image: url('http://www.lincat.cloud/asset/login-bk.jpg');
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
}
#login-box{
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  padding: 50px 50px 0px 50px;
  width: 30%;
  margin-left: 5%;
  margin-top: 8%;
  background-color: white;
  box-shadow: 0 10px 10px #409EFF, 0 0 1px #409EFF
}
.login-tittle{
  color: #409EFF;
  display: block;  
}
#bottom-font{
  font-size: 5px;
}
</style>
  